<template>
    <el-form :model="addRepair" :rules="rules" ref="addRepair" label-width="100px">
        <el-form-item label="维修类目" prop="class">
            <el-col :span="11">
                <el-input v-model="addRepair.class"></el-input>
            </el-col>
            <el-col :span="2">&emsp;</el-col>
            <el-col :span="9" align="left">
                <el-button @click="addRepairClassData">添加项目</el-button>
            </el-col>
        </el-form-item>
        <div v-if="addRepair.classData[0]">
            <div v-for="(item,index) in addRepair.classData" :key="item.id" class="addrepairdata">
                <el-row>
                    <el-col :span="2">&emsp;</el-col>
                    <el-col :span="4">
                        <el-form-item label="项目名称" prop="classdataname">
                            <el-input v-model="item.name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="项目图标" prop="classdataicon">
                            <el-col :span="18">
                                <el-input v-model="item.icon"></el-input> 
                            </el-col>       
                            <el-col :span="6">   
                                <i :class="item.icon" :style="{color:item.color}"></i> 
                            </el-col>  
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="图标颜色" prop="classdatacolor">
                            <el-col :span="18">
                            <el-input v-model="item.color"></el-input>
                            </el-col>
                            <el-col :span="6">
                            <el-color-picker v-model="item.color"></el-color-picker>
                            </el-col>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2">
                        <el-form-item>
                            <el-button type="danger" @click="deleteClassDataItem(index)">删除</el-button>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">&emsp;</el-col>
                </el-row>
            </div> 
        </div>
        <el-form-item>
            <el-col :span="4">
                <el-button type="primary" @click="submitForm('addRepair')">提交</el-button>
            </el-col>
            <el-col :span="4">
            <el-button @click="resetForm('addRepair')">返回</el-button>
            </el-col>
        </el-form-item>
    </el-form>
</template>

<script>
export default {
    data(){
        return {
            addRepair:{
                class:'',
                classData:[]
            },
            rules:{
                class:[{ required: true, message: '不能为空', trigger: 'blur' }],
            }
        }
    },
    methods:{
        addRepairClassData(){
            this.addRepair.classData.push({name:'',icon:'font_family icon-xingbienan',color:'#409EFF'})
        },
        deleteClassDataItem(i){
            this.addRepair.classData.splice(i,1);
        },
        submitForm(addRepair){
            this.$refs[addRepair].validate((valid) => {
                if (valid) {
                    this.$emit('addRepairData',this.addRepair);
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(addRepair){
            this.$refs[addRepair].resetFields();
            this.$emit('backTo');
        }
    }
}
</script>

<style lang="scss" scoped>
    @import '@/assets/icon/icon.scss';
</style>

